<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>出勤表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <!--引入jquery-->
    <script src="/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<!--年：<select id="yselect" ></select>
月：<select id="mselect"><option >1</option><option>2</option><option>3</option><option>4</option>
    <option>5</option><option>6</option><option>7</option><option>8</option>
    <option>9</option><option>10</option><option>11</option><option>12</option></select>-->

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1400px;height:700px;"></div>
<script type="text/javascript">

    let date = new Date();
    let currYear = date.getFullYear();
    let currMonth = date.getMonth()+1;

    //动态添加下拉年份
    for (let i = currYear-4; i <= currYear; i++) {
        $("#yselect").append("<option>"+i+"</option>");
    }
    //赋予默认值
    $("#yselect").val(currYear);
    $("#mselect").val(currMonth);
    //当年改变时触发
    $("#yselect").change(function(){
        showOperLogChart($(this).val(),$("#mselect").val());
    });
    //当月改变时触发
    $("#mselect").change(function(){
        showOperLogChart($("#yselect").val(),$(this).val());
    });

    //初始化方法，默认当前年月
    showOperLogChart(currYear,date.getMonth()+1);
    // 展示图标方法
    function showOperLogChart(year,month) {
        let xData=[];
        let user1Data=[];
        let user2Data=[];
        let user3Data=[];

        $.ajax({
            url: "/attendance/queryShowChartData",
            type: "GET",
            data: {year: year, month:month},
            async: false,
            dataType: "json",
            success: function (resp) {
                if (resp.code === 0) {
                    let data = resp.data;
                    for (let i = 0; i < data.length; i++) {
                        xData.push(data[i].day);
                        user1Data.push(data[i].user1);
                        user2Data.push(data[i].user2);
                        user3Data.push(data[i].user3);
                    }
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option =  {
            title: {
                text: '出勤表',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['用户1', '用户2','用户3']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xData
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 次'
                }
            },
            series: [
                {
                    name: '用户1',
                    type: 'bar',
                    data: user1Data
                },
                {
                    name: '用户2',
                    type: 'bar',
                    data: user2Data
                },
                {
                    name: '用户3',
                    type: 'bar',
                    data: user3Data
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    };
</script>
</body>
</html>